---
layout: single
property_name: font-size
---

<section id="font-size" class="property">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/typography/">
          In collection: <strong>typography</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/font-size/" data-property-name="font-size" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="font-size">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/font-size" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#font-size"><span>#</span>font-size</a>
    </h2>
    <div class="property-description">
      <p>Defines the size of the text.</p>

    </div>

  </header>

    <style type="text/css">.font-size { line-height: 1.2; }</style>




    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: medium;">font-size: medium;</code>
        </p>
        <div class="example-description">
          <p>The text will use the browser&#39;s default <strong>medium</strong> size.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-medium"><p>Hello world</p><p>The quick brown fox jumps over the lazy dog</p></div>
        </div>
      </aside>
          <style type="text/css">#font-size-medium{ font-size:medium;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 20px;">font-size: 20px;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>pixel</strong> values.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-20px"><p>Hello world</p><p>The quick brown fox jumps over the lazy dog</p></div>
        </div>
      </aside>
          <style type="text/css">#font-size-20px{ font-size:20px;}</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 1.2em;">font-size: 1.2em;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>em</strong> values.</p>
<p>The value is <strong>relative</strong> to the <strong>parent</strong>&#39;s <code>font-size</code>.<br>As a result, the value will <strong>cascade</strong> if used on child elements.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-12em"><div class="parent">Parent container: <strong>18px</strong><div class="block block--alpha">Font-size: 1.2em = <strong>21.6px</strong><div class="block block--pink">Font-size: 1.2em = <strong>25.92px</strong><div class="block block--yellow">Font-size: 1.2em = <strong>31.104px</strong></div></div></div></div>
        </div>
      </aside>
        <style type="text/css">#font-size-12em .parent { font-size: 18px; }#font-size-12em .block { font-size: 1.2em;margin-top: 0.25rem; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 1.2rem;">font-size: 1.2rem;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>rem</strong> values.</p>
<p>The value is <strong>relative</strong> to the <strong>root element</strong>&#39;s <code>font-size</code>, which is the <code>&lt;html&gt;</code> element.<br>As a result, the value will <strong>not</strong> vary depending on the <em>depth</em> of the element in the HTML hierarchy, and will reamin context independent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-12rem"><div class="parent"><code>&lt;html&gt;</code> root element: <strong>18px</strong><div class="block block--alpha">Font-size: 1.2rem = <strong>21.6px</strong><div class="block block--pink">Font-size: 1.2rem = <strong>21.6px</strong><div class="block block--yellow">Font-size: 1.2rem = <strong>21.6px</strong></div></div></div></div>
        </div>
      </aside>
        <style type="text/css">#font-size-12rem .parent { font-size: 18px; }#font-size-12rem .block { font-size: 1.2rem;margin-top: 0.25rem; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: 90%;">font-size: 90%;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>percentage</strong> values. They act like em values.</p>
<p>The value is <strong>relative</strong> to the <strong>parent</strong>&#39;s <code>font-size</code>.<br>As a result, the value will <strong>cascade</strong> if used on child elements.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-90"><div class="parent">Parent container: <strong>18px</strong><div class="block block--alpha">Font-size: 90% = <strong>16.2</strong><div class="block block--pink">Font-size: 90% = <strong>14.58px</strong><div class="block block--yellow">Font-size: 90% = <strong>13.122px</strong></div></div></div></div>
        </div>
      </aside>
        <style type="text/css">#font-size-90 .parent { font-size: 18px; }#font-size-90 .block { font-size: 90%;margin-top: 0.25rem; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: smaller;">font-size: smaller;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>relative keywords</strong>. The value is relative to the <strong>parent</strong>.</p>
<p>The following are available:</p>
<ul><li><code>larger</code></li><li><code>smaller</code></li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-smaller"><div class="parent">Parent container: <strong>18px</strong><div class="block block--alpha">Font-size: smaller<div class="block block--pink">Font-size: smaller<div class="block block--yellow">Font-size: smaller</div></div></div></div>
        </div>
      </aside>
        <style type="text/css">#font-size-smaller .parent { font-size: 18px; }#font-size-smaller .block { font-size: smaller;margin-top: 0.25rem; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="font-size: x-large;">font-size: x-large;</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>absolute keywords</strong>. The value is relative to the <strong>root element</strong> <code>&lt;html&gt;</code>.</p>
<p>The following are available:</p>
<ul><li><code>xx-small</code></li><li><code>x-small</code></li><li><code>small</code></li><li><code>medium</code></li><li><code>large</code></li><li><code>x-large</code></li><li><code>xx-large</code></li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div font-size " id="font-size-x-large"><div class="parent"><code>&lt;html&gt;</code> root element: <strong>18px</strong><div class="block block--alpha">Font-size: x-large<div class="block block--pink">Font-size: x-large<div class="block block--yellow">Font-size: x-large</div></div></div></div>
        </div>
      </aside>
        <style type="text/css">#font-size-x-large .parent { font-size: 18px; }#font-size-x-large .block { font-size: x-large;margin-top: 0.25rem; }</style>
    </section>

</section>
